<template>
  <div class="login-container">

    <!-- 蓝主红辅渐变背景 -->
    <div class="bg-gradient"></div>

    <!-- 毛玻璃卡片 -->
    <div class="card">

      <div class="logo-box">
        <span class="logo-text">Real Vision</span>
      </div>

<!--      <h1>{{ isReg ? '注册' : '登录' }}</h1>-->

      <el-form ref="form" :model="form" :rules="rules">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="用户名" prefix-icon="el-icon-user" />
        </el-form-item>

        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
              v-model="form.password"
              type="password"
              placeholder="密码"
              prefix-icon="el-icon-lock"
              show-password
          />
        </el-form-item>

        <!-- 注册时二次确认密码 -->
        <el-form-item v-if="isReg" prop="confirm">
          <el-input
              v-model="form.confirm"
              type="password"
              placeholder="确认密码"
              prefix-icon="el-icon-lock"
              show-password
          />
        </el-form-item>

        <el-form-item v-if="isReg" prop="nickname">
          <el-input
              v-model="form.nickname"
              placeholder="昵称"
              prefix-icon="el-icon-user-solid"
          />
        </el-form-item>

        <el-button
            type="primary"
            :class="{ regBtn: isReg }"
            native-type="submit"
            :loading="loading"
            style="width:100%"
            @click.prevent="submit"
        >
          {{ isReg ? '注册' : '登录' }}
        </el-button>
      </el-form>

      <div class="toggle" @click="toggleMode">
        {{ isReg ? '已有账号？返回登录' : '没有账号？立即注册' }}
      </div>
    </div>
  </div>
</template>

<script>

import {register, login} from "@/api/http/user";
import {setCache} from "@/utils/local_cache";

export default {
  name: "Login",
  data() {
    const validateConfirm = (_, value, callback) => {
      if (this.isReg && value !== this.form.password) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    }
    return {
      isReg: false,
      loading: false,
      form: { username: '', password: '', confirm: '' , nickname: ''},
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        confirm: [{ validator: validateConfirm, trigger: 'blur' }],
        nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }]
      },
    }
  },
  methods: {
    toggleMode() {
      this.isReg = !this.isReg
      this.$refs.form.resetFields()
    },
    submit() {
      // this.$router.push({path: '/index'})
      this.$refs.form.validate(async valid => {
        if (!valid) return
        this.loading = true
        let result;
        try {
          if (this.isReg){
            result = await register({
              nickname: this.form.nickname,
              username: this.form.username,
              password: this.form.password
            })
            if (result.code === 0) {
              this.$message.success('注册成功')
              this.toggleMode()
            }else {
              this.$message.error(result.msg)
            }
          }else {
            const loginResult = await login({
              username: this.form.username,
              password: this.form.password
            })
            if (loginResult.code === 0) {
              setCache('user' , loginResult.data);
              this.$message.success('登录成功')
              await this.$router.push({path: '/index'})
            }else {
              this.$message.error(loginResult.msg)
            }
          }
        }catch (e){
          console.error(e)
        }finally {
          this.loading = false
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bg-gradient {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  background: linear-gradient(
  135deg,
  #0F1419 0%,      /* 极暗灰黑 */
  #1A1F2E 60%,     /* 深蓝黑   */
  #2E1A29 80%,     /* 深紫黑   */
  #2E1A29 100%     /* 深紫黑   */);
}
.card {
  width: 340px;
  padding: 40px 32px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 40px rgba(64, 158, 255, 0.4);
}
h1 {
  text-align: center;
  color: #fff;
  margin-bottom: 24px;
  font-size: 24px;
  letter-spacing: 1px;
}
.toggle {
  text-align: center;
  margin-top: 16px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.toggle:hover {
  text-decoration: underline;
}

.logo-box {
  text-align: center;
  margin-bottom: 24px;
}
.logo-text {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 2px;
  padding-bottom: 4px;
}

/* 登录按钮保持蓝色（Element-UI 默认 #409EFF）*/

/* 注册按钮：B站红 #FB7299
.regBtn {
  background: #FB7299 !important;
  border-color: #FB7299 !important;
}
.regBtn:hover {
  background: #FF8FB3 !important;
  border-color: #FF8FB3 !important;
}

*/

.el-button {
  background-color: #2E1A29; /* 暗黑色 */
  border-color: #2E1A29; /* 暗黑色 */
  color: #fff;
}
.el-button:hover {
  background-color: #1A1F2E; /* 深蓝黑 */
  border-color: #1A1F2E; /* 深蓝黑 */
}

@media (max-width: 480px) {
  .card { width: 90%; }
}
</style>